<template>
  <div class="orderadd">
    <div class="addordergoods"><span>新增订单商品</span></div>
    <!-- 导航栏查询 -->
    <div class="nav-title">
      <span class="goods_input_option"
        ><span>商品(单击选中)按分类筛选:</span>
        <el-select v-model="ruleForm.gt_pno" placeholder="请选择" class="big">
          <el-option
            v-for="(item, index) in bigGoods"
            :label="item.gt_name"
            :value="item.gt_name"
            :key="index"
            @click.native="getId(item.gt_id)"
          ></el-option>
        </el-select>
        <el-select
          v-model="ruleForm.gt_name"
          placeholder="请选择"
          v-show="gt_id"
        >
          <el-option
            v-for="(item, index) in smallGoods"
            :label="item.gt_name"
            :value="item.gt_name"
            :key="index"
          ></el-option>
        </el-select>
      </span>
      <span class="goods_input">
        <span>商品名称:</span>
        <el-input
          placeholder="商品名称"
          v-model="ruleForm.goods_name"
        ></el-input>
      </span>
      <span class="goods_input">
        <span>规格:</span>
        <el-input
          placeholder="规格"
          v-model="ruleForm.goods_descript"
        ></el-input>
      </span>
      <span class="goods_input">
        <span>型号:</span>
        <el-input
          placeholder="型号"
          v-model="ruleForm.goods_barcode"
        ></el-input>
      </span>
      <el-button type="primary" class="button" @click="searchGoods"
        >立即搜索</el-button
      >
    </div>
    <!-- 商品表格 -->
    <AddOrderOrderList
      :tableData="tableData"
      :titleList="titleList"
      :linklist="linklist"
      @JumpAddGoodsPage="JumpAddGoodsPage"
    />
    <Footer>
      <template v-slot:choose><div></div></template>
      <template v-slot:paging
        ><Page :total="totalSize" @getLimit="getLimit" @getPage="getPage"
      /></template>
    </Footer>
  </div>
</template>

<script>
import AddOrderOrderList from "../../../components/AddOrderGoods.vue";
import Page from "../../../components/Paging.vue";
import Footer from "../../../components/Footer.vue";
import {
  QuueryOrderGoodsAxios,
  AddOrderGoodsAxios,
  getBigGoodsAxios,
  SearchGoodsAxios,
} from "../../../http/apis/orderApi/index";
export default {
  name: "OrderAdd",
  components: { AddOrderOrderList, Page, Footer },
  data() {
    return {
      ruleForm: {
        gt_name: "",
        gt_pno: "",
        goods_name: "",
        goods_descript: "",
        goods_barcode: "",
      },
      state: false,
      // 大分类
      bigGoods: [],
      smallGoods: [],
      currentPage: 1,
      pageSize: 3,
      totalSize: 0,
      order_id: "",
      goods_id: "",
      info: "",
      gt_id: "",
      // arr: [],
      tableData: [],
      titleList: [
        "index",
        "gt_pno", //大分类
        "gt_name", //小分类
        "goods_name", //商品名称
        "goods_pic", //商品图
        "goods_descript", //规格
        "goods_barcode", //商品型号
        "goods_unit", //商品库存
        "goods_cost", //商品成本
        "goods_price", //当前售价
        "goods_state", //商品备注
      ],
      linklist: [
        {
          id: 0,
          name: "排序",
          isRouter: false,
        },
        {
          id: 1,
          name: "大分类",
          isRouter: false,
        },
        {
          id: 2,
          name: "小分类",
          isRouter: false,
        },
        {
          id: 3,
          name: "商品名称",
          isRouter: false,
        },
        {
          id: 4,
          name: "商品图",
          isRouter: false,
        },
        {
          id: 5,
          name: "规格",
          isRouter: false,
        },
        {
          id: 6,
          name: "型号",
          isRouter: false,
        },
        {
          id: 7,
          name: "商品库存",
          isRouter: false,
        },
        {
          id: 8,
          name: "成本",
          isRouter: false,
        },
        {
          id: 9,
          name: "售价",
          isRouter: false,
        },
        {
          id: 10,
          name: "商品备注",
          isRouter: false,
        },
      ],
    };
  },
  methods: {
    getLimit(val) {
      this.pageSize = val;
      this.state ? this.SearchOrderGoods() : this.QueryOrderOrderGoods();
    },
    // 分页
    getPage(val) {
      this.currentPage = val;
      this.state ? this.SearchOrderGoods() : this.QueryOrderOrderGoods();
    },
    getId(id) {
      console.log("id", id);
      this.gt_id = id;
      console.log("this.gt_id", this.gt_id);
      this.getfenleiGoods();
    },

    // 搜索
    searchGoods() {
      this.SearchOrderGoods();
    },

    // 传递数据
    JumpAddGoodsPage(row) {
      console.log("点击的商品数据", row);
      (this.goods_id = row.goods_id),
        console.log("商品id,订单id", this.goods_id, this.order_id);
      //  新增商品请求
      AddOrderGoodsAxios({
        goods_id: this.goods_id,
        order_id: this.order_id,
      })
        .then((res) => {
          console.log("新增商品请求成功", res.data);
          if (this.$route.query.state == "ordergoods") {
            this.$router.push({
              path: "/order/ordergoods",
              query: { info: this.info },
            });
          } else if (this.$route.query.state == "addorderpage") {
            this.$router.push({
              path: "/order/addorderpage",
              query: { info: this.info },
            });
          } else if (this.$route.query.state == "editorder") {
            this.$router.push({
              path: "/order/editorder",
              query: { info: this.info },
            });
          }
        })

        .catch((err) => {
          console.log("新增商品请求失败", err);
        });
    },
    // 查询订单商品
    QueryOrderOrderGoods() {
      this.tableData = [];
      QuueryOrderGoodsAxios({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      })
        .then((res) => {
          console.log("点击查询订单商品请求成功", res.data.data[0]);
          let arr = res.data.data[0];
          this.totalSize = res.data.data[1];
          let index = 1;
          arr.forEach((item) => {
            let obj = {
              index: index++,
              gt_pno: item.gt_pno,
              gt_name: item.gt_name,
              goods_name: item.goods_name,
              goods_id: item.goods_id,
              goods_pic: item.goods_pic,
              goods_descript: item.goods_descript,
              goods_barcode: item.goods_barcode,
              goods_unit: item.goods_unit,
              goods_cost: item.goods_cost,
              goods_price: item.goods_price,
              goods_state: item.goods_state,
            };
            this.tableData.push(obj);
          });
        })
        .catch((err) => {
          console.log("点击查询订单商品请求错误", err);
        });
    },

    // 请求商品种类
    getfenleiGoods() {
      // 获取订单商品大分类
      getBigGoodsAxios(this.gt_id)
        .then((res) => {
          console.log("获取订单商品大分类请求成功", res.data.data);
          if (!this.gt_id) {
            this.bigGoods = res.data.data;
          } else {
            this.smallGoods = res.data.data;
          }
          console.log("大分类数据", this.bigGoods);
          console.log("小分类数据", this.smallGoods);
        })
        .catch((err) => {
          console.log("获取订单商品大分类请求失败", err);
        });
    },

    // 搜索订单商品请求
    SearchOrderGoods() {
      console.log(
        "搜索发送的数据",
        this.ruleForm,
        this.currentPage,
        this.pageSize
      );
      SearchGoodsAxios({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        goods_barcode: this.ruleForm.goods_barcode,
        goods_descript: this.ruleForm.goods_descript,
        goods_name: this.ruleForm.goods_name,
        gt_name: this.ruleForm.gt_name,
        gt_pno: this.ruleForm.gt_pno,
      })
        .then((res) => {
          this.state = true;
          this.tableData = [];
          console.log("搜索订单商品请求成功", res.data);
          this.totalSize = res.data.count;
          let arr = res.data.data;
          let index = 1;
          arr.forEach((item) => {
            let obj = {
              index: index++,
              gt_pno: item.gt_pno,
              gt_name: item.gt_name,
              goods_name: item.goods_name,
              goods_id: item.goods_id,
              goods_pic: item.goods_pic,
              goods_descript: item.goods_descript,
              goods_barcode: item.goods_barcode,
              goods_unit: item.goods_unit,
              goods_cost: item.goods_cost,
              goods_price: item.goods_price,
              goods_state: item.goods_state,
            };
            this.tableData.push(obj);
          });
        })
        .catch((err) => {
          console.log("搜索订单商品请求错误", err);
        });
    },
  },
  created() {
    this.QueryOrderOrderGoods();
    this.order_id = this.$route.query.info.order_id;
    this.info = this.$route.query.info;
    console.log("当前页面info数据", this.info);
    this.getfenleiGoods();
  },
};
</script>

<style lang='scss' scoped>
.addordergoods {
  width: 100%;
  height: 50px;
  line-height: 50px;
}
.addordergoods span {
  font-size: 20px;
}
.goods_input {
  width: 150px;
  margin-left: 10px;
}
.goods_input .el-input {
  width: 150px;
  margin-left: 10px;
}
.goods_input .el-input_inner {
  width: 150px;
}
.nav-title {
  width: 100%;
  margin-bottom: 20px;
}
.goods_input_option {
  margin-right: 10px;
}
.goods_input_option span {
  margin-right: 10px;
}
.button {
  margin-left: 10px;
}
.big {
  margin-right: 10px;
}
 .el-select {
  width: 150px;
}
</style>
